
<template>
  <el-form :model = 'adminLoginForm' :rules = 'rules' ref="adminLoginForm" label-position="left" label-width="0px" class="demo-ruleForm login-container">
    <h3 class="title">{{title}}</h3>
    <el-form-item prop="account">
      <el-input type="text" v-model="adminLoginForm.account" place-holder="account" disabled></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="adminLoginForm.password" place-holder="password"></el-input>
    </el-form-item>
    <el-form-item >
      <el-button type="primary" style="width:100%;" @click.native.prevent="login">Login</el-button>
    </el-form-item>
  </el-form>
</template>


<script>
  /* eslint-disable */
  export default{
    data() {
      return {
        title:'PCM Automation Login',
        adminLoginForm:{
          account:'admin',
          password:'admin'
        },
        rules:{
          account : [
            {required:true , message : 'can not be empty'}
          ],
          password : [
            {required:true , message : 'can not be empty'}
          ]
        },
        checked : true,
      };
    },
    methods :{
      login:function() {
        var self = this;
        var url = 'users/login';
        this.$refs.adminLoginForm.validate(function(valid){
          if(valid){
            var loginParams = {username:self.adminLoginForm.account,password: self.adminLoginForm.password};
            self.$http.post(url,loginParams,{header:{},emulateJSON:true}).then(function(res){
              if (res.body.resultCode == '200'){
                sessionStorage.setItem('user',JSON.stringify(res.body.data));
                self.$store.dispatch('login');
                self.$router.push({path:'/PCM_AutomationViewer/TestCaseTable'});
              }
              else {
                self.$message({
                  message:res.body.reason,
                  type:'warning',
                })
              };
            },function(error){
                return false;
            })
          }
        });
      }
    }
  }
</script>
<style >
  .login-container {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    -moz-border-radius: 5px;
    background-clip: padding-box;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
    background-color:#545c64;
    text-color:#fff;
    active-text-color:#ffd04b;
  }
  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #fff9fc;
  }

  .remember {
    margin: 0px 0px 35px 0px;
  }


</style>
